<script setup>
import { reactive, ref, computed } from 'vue'
import { useUserStore } from '@/store'
import { getRememberInfo } from '@/utils'
import { useDebounceFn } from '@vueuse/core'
import { getRoleTypesApi } from '@/api/user'

const isDev = computed(() => import.meta.env.DEV)
const imgSrc = ref('')
const roleTypes = ref([])

getRoleTypesApi().then((res) => {
    if (res.data) {
        res.data.forEach((item) => {
            roleTypes.value.push({
                label: item.roleName,
                value: item.roleType
            })
        })
    }
})

// 获取验证码
const getCode = () => {
    const src = isDev.value ? '/api/api/login/code' : '/api/login/code'
    // 通过更新时间戳，让浏览器每次都重新请求验证码
    imgSrc.value = src + `?time=${new Date().getTime()}`
}

// 节流获取验证码
const debounceFnGetCode = useDebounceFn(getCode, 1000)

getCode()

// 表单信息
const loginForm = reactive({
    username: '',
    password: '',
    userType: '',
    code: '',
    remember: false
})

// 判断浏览器里面有没有上一次登录的信息
const info = () => {
    const userInfo = getRememberInfo()
    if (JSON.stringify(userInfo) !== '{}') {
        loginForm.username = userInfo.username
        loginForm.password = userInfo.password
        loginForm.userType = userInfo.userType
        loginForm.remember = userInfo.remember
    }
}

info()

// 表单验证规则
const rules = {
    username: [
        {
            trigger: 'change',
            required: true,
            message: '请输入账户'
        }
    ],
    password: [
        {
            trigger: 'change',
            required: true,
            message: '请输入密码'
        }
    ],
    userType: [
        {
            trigger: 'change',
            required: true,
            message: '请选择用户类型'
        }],
    code: [
        {
            trigger: 'change',
            required: true,
            message: '请输入验证码'
        }
    ]
}
// 表单对象
const formRef = ref(null)

const userStore = useUserStore()

// 登录
const loginBtn = async () => {
    formRef.value.validate((valid) => {
        if (valid) {
            // 登录
            userStore.login(loginForm)
        } else {
            return false
        }
    })
}
</script>

<template>
    <section>
        <div class="color"></div>
        <div class="color"></div>
        <div class="color"></div>
        <div class="box">
            <div class="square" style="--i:0;"></div>
            <div class="square" style="--i:1;"></div>
            <div class="square" style="--i:2;"></div>
            <div class="square" style="--i:3;"></div>
            <div class="square" style="--i:4;"></div>
            <div class="container">
                <div class="form">
                    <h2>宿舍管理系统</h2>
                    <el-form :model="loginForm" ref="formRef" :rules="rules">
                        <el-form-item prop="username">
                            <el-input size="default" v-model="loginForm.username" placeholder="请输入账户"></el-input>
                        </el-form-item>
                        <el-form-item prop="password">
                            <el-input type="password" size="default" v-model="loginForm.password"
                                placeholder="请输入密码"></el-input>
                        </el-form-item>
                        <el-form-item prop="userType">
                            <el-select v-model="loginForm.userType" size="default" placeholder="选择用户类型">
                                <el-option v-for="item in roleTypes" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                        <el-form-item prop="code">
                            <div flex justify-around>
                                <el-input v-model="loginForm.code" class="w-1/2"></el-input>
                                <img class="cursor-pointer" style="border-radius: 35px;" @click="debounceFnGetCode"
                                    :src="imgSrc" alt="验证码" />
                            </div>
                        </el-form-item>
                        <el-form-item>
                            <el-checkbox text-white v-model="loginForm.remember" label="记住密码" size="default" />
                        </el-form-item>
                        <el-form-item>
                            <el-button w-full size="default" type="primary" @click="loginBtn">立即登录</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
    </section>
</template>

<style scoped>
section {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(to bottom, #f1f4f9, #dff1ff);
}

section .color {
    position: absolute;
    filter: blur(150px);
}

section .color:nth-child(1) {
    top: -350px;
    width: 600px;
    height: 600px;
    background: #ff359b;
}

section .color:nth-child(2) {
    bottom: -150px;
    left: 100px;
    width: 500px;
    height: 500px;
    background: #fffd87;
}

section .color:nth-child(3) {
    bottom: 50px;
    right: 100px;
    width: 300px;
    height: 300px;
    background: #00d2ff;
}

.box {
    position: relative;
}

.box .square {
    position: absolute;
    backdrop-filter: blur(5px);
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    animation: animate 10s linear infinite;
    animation-delay: calc(-1s * var(--i));
}

@keyframes animate {

    0%,
    100% {
        transform: translateY(-40px);
    }

    50% {
        transform: translateY(40px);
    }
}

.box .square:nth-child(1) {
    top: -50px;
    right: -60px;
    width: 100px;
    height: 100px;
}

.box .square:nth-child(2) {
    top: 150px;
    left: -100px;
    width: 120px;
    height: 120px;
    z-index: 2;
}

.box .square:nth-child(3) {
    bottom: 50px;
    right: -60px;
    width: 80px;
    height: 80px;
    z-index: 2;
}

.box .square:nth-child(4) {
    bottom: -80px;
    left: 100px;
    width: 50px;
    height: 50px;
}

.box .square:nth-child(5) {
    top: -80px;
    left: 140px;
    width: 60px;
    height: 60px;
}

.container {
    position: relative;
    width: 400px;
    min-height: 400px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.form {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 40px;
}

.form h2 {
    position: relative;
    color: #409eff;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 40px;
}

.form h2::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 80px;
    height: 4px;
    background: #409eff;
}

:deep(.el-input__wrapper) {
    border-radius: 35px;
    background: transparent;
    padding: 0;
}

:deep(.el-input__inner) {
    width: 100%;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    outline: none;
    padding: 10px 20px;
    border-radius: 35px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 16px;
    letter-spacing: 1px;
    color: #409eff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
</style>
